<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="renderer" content="webkit"/>
        <title>分类管理</title>
        <link type="text/css" rel="stylesheet/less" href="${request.contextPath}/static/css/style.less">
        <script src="${request.contextPath}/static/js/less-2.7.1.min.js"></script>
        <script src="${request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
        <script src="${request.contextPath}/static/js/vue.js"></script>
        <!--[if lt IE9]>
        <script type="text/javascript" src="js/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <article class="categoryManage">
            <header>
            <h1 class="brand"><span class="icon icon-logo"></span>标准件选型系统</h1>
            <div class="tabs">
                <a href="${request.contextPath}/selectionProductController/toMaterial.do">料库</a>
                <a href="${request.contextPath}/selectionProductController/toProductListPage.do">产品结构清单</a>
                <a href="${request.contextPath}/selectionProductController/toPropertyManage.do">规格管理</a>
                <a class="active" href="${request.contextPath}/selectionProductController/toCategoryManage.do">分类管理</a>
            </div>
            <div class="user-info">
                <span class="name">${userInfo.userName}</span>
                <span class="position">${userInfo.roleName}</span>
                <a class="logout" href="javascript:outLogin();">退出</a>
            </div>
        </header>
            <section>
                <ul class="pro-category">
                    <!--一级分类primary-->
                    <li class="primary">
                        <div>
                            <!--点击icon-edit时，item-name隐藏，item-editor出现；点击icon-close-circle，删除item-name-->
                            <div class="item-name">结构标准件<span class="icon icon-edit"></span><span class="icon icon-close-circle"></span></div>
                            <div class="item-editor">
                                <input type="text" name="" value="结构标准件" placeholder="请输入">
                                <button type="button" class="btn-save">保存</button>
                                <button type="button" class="btn-cancel">取消</button>
                            </div>
                        </div>
                        <ul>
                            <!--二级分类secondary-->
                            <li class="secondary">
                                <div>
                                    <div class="item-name">紧固件<span class="icon icon-edit"></span><span class="icon icon-close-circle"></span></div>
                                    <div class="item-editor">
                                        <input type="text" name="" value="紧固件" placeholder="请输入">
                                        <button type="button" class="btn-save">保存</button>
                                        <button type="button" class="btn-cancel">取消</button>
                                    </div>
                                </div>
                                <ul>
                                    <!--三级分类tertiary：可删除、不可编辑-->
                                    <li class="tertiary">螺丝<span class="icon icon-close-circle"></span></li>
                                    <!--点击btn-add-item后，item-editor出现，而btn-add-item隐藏-->
                                    <li class="btn-add-item"><span class="icon icon-add"></span>添加三类</li>
                                    <li class="item-editor">
                                        <input type="text" name="" value="" placeholder="请输入">
                                        <button type="button" class="btn-save">保存</button>
                                        <button type="button" class="btn-cancel">取消</button>
                                    </li>
                                </ul>
                            </li>
                            <!--二级分类secondary-->
                            <li class="secondary">
                                <div>
                                    <div class="btn-add-item"><span class="icon icon-add"></span>添加二类</div>
                                    <div class="item-editor">
                                        <input type="text" name="" value="结构标准件" placeholder="">
                                        <button type="button" class="btn-save">保存</button>
                                        <button type="button" class="btn-cancel">取消</button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!--一级分类-->
                    <li class="primary">
                        <div>
                            <div class="btn-add-item"><span class="icon icon-add"></span>添加一类</div>
                            <div class="item-editor">
                                <input type="text" name="" value="" placeholder="请输入">
                                <button type="button" class="btn-save">保存</button>
                                <button type="button" class="btn-cancel">取消</button>
                            </div>
                        </div>
                        <!--
                        <ul>
                            <li class="secondary">
                                <div>
                                    <div class="btn-add-item disabled"><span class="icon icon-add"></span>添加二类</div>
                                    <div class="item-editor">
                                        <input type="text" name="" value="紧固件" placeholder="">
                                        <button type="button" class="btn-save">保存</button>
                                        <button type="button" class="btn-cancel">取消</button>
                                    </div>
                                </div>
                                <ul>
                                    <li class="btn-add-item disabled"><span class="icon icon-add"></span>添加三类</li>
                                    <li class="item-editor">
                                        <input type="text" name="" value="" placeholder="请输入">
                                        <button type="button" class="btn-save">保存</button>
                                        <button type="button" class="btn-cancel">取消</button>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        -->
                    </li>
                </ul>
            </section>
        </article>
    </body>
</html>